<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="购物车"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- 购物车列表 -->
    <scroll-view v-if="cartList.length > 0" class="cart-list" :scroll-y="true">
      <view
        v-for="item in cartList"
        :key="item.id"
        class="cart-item"
        :class="{ selected: item.selected }"
      >
        <view class="checkbox-wrapper" @click="toggleSelect(item)">
          <view class="checkbox" :class="{ checked: item.selected }">
            <uni-icons
              v-if="item.selected"
              type="checkmarkempty"
              size="16"
              color="#fff"
            ></uni-icons>
          </view>
        </view>
        <image :src="item.image" class="item-image" mode="aspectFit" />
        <view class="item-info">
          <text class="item-name">{{ item.name }}</text>
          <view class="item-bottom">
            <view class="price-row">
              <text class="price">¥ {{ item.price }}</text>
            </view>
            <view class="quantity-control">
              <view
                class="quantity-btn"
                :class="{ disabled: item.quantity <= 1 }"
                @click="decreaseQuantity(item)"
              >
                <uni-icons type="minus" size="20" color="#666"></uni-icons>
              </view>
              <text class="quantity">{{ item.quantity }}</text>
              <view class="quantity-btn" @click="increaseQuantity(item)">
                <uni-icons type="plus" size="20" color="#666"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <view class="empty-icon">
        <uni-icons type="cart" size="100" color="#d9d9d9"></uni-icons>
      </view>
      <text class="empty-text">购物车是空的~</text>
    </view>

    <!-- 底部结算栏 -->
    <view v-if="cartList.length > 0" class="footer-bar">
      <view class="select-all" @click="toggleSelectAll">
        <view class="checkbox" :class="{ checked: isAllSelected }">
          <uni-icons
            v-if="isAllSelected"
            type="checkmarkempty"
            size="16"
            color="#fff"
          ></uni-icons>
        </view>
        <text class="select-text">全选</text>
      </view>
      <view class="total-section">
        <text class="total-label">合计</text>
        <text class="total-price">¥ {{ totalPrice }}</text>
      </view>
      <view class="checkout-btn" @click="handleCheckout">
        <text>结算</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// 购物车列表
const cartList = ref([
  {
    id: 1,
    name: "智慧版授权",
    price: "1.00",
    quantity: 1,
    image: "/static/logo.png",
    selected: false,
  },
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换选择
const toggleSelect = (item) => {
  item.selected = !item.selected;
};

// 是否全选
const isAllSelected = computed(() => {
  return (
    cartList.value.length > 0 && cartList.value.every((item) => item.selected)
  );
});

// 切换全选
const toggleSelectAll = () => {
  const shouldSelectAll = !isAllSelected.value;
  cartList.value.forEach((item) => {
    item.selected = shouldSelectAll;
  });
};

// 减少数量
const decreaseQuantity = (item) => {
  if (item.quantity > 1) {
    item.quantity--;
  }
};

// 增加数量
const increaseQuantity = (item) => {
  item.quantity++;
};

// 计算总价
const totalPrice = computed(() => {
  const total = cartList.value
    .filter((item) => item.selected)
    .reduce((sum, item) => sum + parseFloat(item.price) * item.quantity, 0);
  return total.toFixed(2);
});

// 结算
const handleCheckout = () => {
  const selectedItems = cartList.value.filter((item) => item.selected);

  if (selectedItems.length === 0) {
    uni.showToast({
      title: "请选择要结算的商品",
      icon: "none",
    });
    return;
  }

  console.log("结算商品:", selectedItems);
  uni.showToast({
    title: "去结算",
    icon: "none",
  });
  // TODO: 跳转到订单确认页面
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

// 购物车列表
.cart-list {
  height: calc(100vh - 88rpx - 120rpx);
  padding: 20rpx 30rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background-color: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.checkbox-wrapper {
  flex-shrink: 0;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &.checked {
    background-color: #ffb200;
    border-color: #ffb200;
  }

  &:active {
    opacity: 0.7;
  }
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.item-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-row {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.quantity-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  &:active {
    opacity: 0.7;
  }
}

.quantity {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  min-width: 40rpx;
  text-align: center;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-icon {
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 底部结算栏
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-right: auto;

  &:active {
    opacity: 0.7;
  }
}

.select-text {
  font-size: 28rpx;
  color: #333;
}

.total-section {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
  margin-right: 20rpx;
}

.total-label {
  font-size: 26rpx;
  color: #666;
}

.total-price {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: 700;
}

.checkout-btn {
  padding: 20rpx 60rpx;
  background-color: #ffb200;
  border-radius: 50rpx;

  text {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}
</style>
